<template>
    <div class="d-flex align-center" style="height: 100%;">
        <v-row justify="center" align="center" no-gutters class="ma-2">
            <v-card  class="mx-auto pa-12 pb-8" elevation="2" min-width="500" rounded="lg">
                <v-row justify="center" align="center" no-gutters class="ma-2">
                    <h2>LAZISOFT</h2>
                </v-row>
                <v-form ref="refLoginForm" class="text-left" v-model="isFormValid" lazy-validation @submit.prevent="loginApp">
                    <v-text-field v-model="account" 
                    tabindex="1"
                    required 
                    :error="error" 
                    density="default" 
                    color="primary" 
                    name="account" 
                    clearable  
                    label="用户名" 
                    @keyup.enter="loginApp"
                    validateOn="blur"
                    :rules="accountRules"
                    @change="resetErrors"
                    bg-color="#222" outlined></v-text-field>

                    <v-text-field 
                    tabindex="2"
                    label="用户密码" 
                    ref="refPassword" 
                    v-model="password" 
                    :append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" 
                    @click:append-inner="showPassword = !showPassword"
                    :type="showPassword ? 'text' : 'password'" 
                    :error="error" 
                    @change="resetErrors"
                    :rules="passwordRules"
                    name="password" 
                    validateOn="blur"
                    outlined bg-color="#222">
                    </v-text-field>
                    <v-btn :loading="isLoading" :disabled="isSignInDisabled" size="x-large" class="mt-2" block type="submit">登录</v-btn>
                </v-form>
                <v-btn class="mb-8" color="success" size="large" variant="tonal" block @click="loginApp">Log In</v-btn>
                <v-row justify="center" align="center" no-gutters>
                    <div class="ma-2">Build version: {{ defaultConfig.version_name }}</div>
                </v-row>
            </v-card>
        </v-row>
    </div>
</template>


<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import defaultConfig from '@shared/constans/defaultConfig'

const refLoginForm = ref();
const isFormValid = ref(true);
const isSignInDisabled = ref(false);
const isLoading = ref(false);
const showPassword = ref(false);
const account = ref("");
const password = ref("");
const error = ref(false);
const visible = ref(false)
const isShowAlert = ref(false)
const router = useRouter();


const resetErrors = () => {
  error.value = false;
};

const passwordRules = ref([
  (v: string) => !!v || "Password is required",
  (v: string) =>
    (v && v.length <= 20) || "Password must be less than 20 characters",
]);


const accountRules = ref([
  (v: string) => !!v || "account is required",
]);


async function loginApp(){
    const { valid } = await refLoginForm.value.validate();
    if (valid) {
    isLoading.value = true;
    isSignInDisabled.value = true;
  } else {
	return;
  }
    router.push({name: 'home'})
}

</script>
